<template>
  <div class="shujixq">
    <div class="booktop">
      <div class="top">
        <div class="top1">
          <div class="imgs">
            <img src="../../assets/images/logon.png" alt="" />
          </div>
          <div class="lefts">
            <div></div>
            <div class="lefts1">浙江省非物质文化<br />数字文献中心</div>
            <div class="lefts2">
              ZhejiangProvinceIntangibleCultureDigitalLiteratureCenter
            </div>
          </div>
          <div class="rights">
            <div></div>
            <div class="ris1">
              <div class="ri">会员</div>
              <div class="ri">帮助</div>
              <!-- <div class="ri">我的</div> -->
              <!-- <div class="ri">欢迎</div> -->
              <div class="ri1" @click="logins()">登录</div>
            </div>
            <div class="ris3">
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
                style="width: 100%; display: flex; height: 56px"
              >
                <el-form-item
                  style="width: 382px; height: 56px; margin-bottom: 0"
                >
                  <el-input
                    v-model="formInline.user"
                    placeholder="输入关键词搜索"
                    style="width: 382px; height: 56px"
                  >
                    <img
                      slot="append"
                      src="../../assets/images/sousuo.png"
                      alt=""
                    />
                  </el-input>
                  <!-- <el-input placeholder="输入关键词搜索" v-model="formInline.user" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" @click="sousuos()"></el-button>
                        </el-input> -->
                </el-form-item>
              </el-form>
            </div>
            <div class="ris2" v-if="showLogin">
              <div class="login">登录</div>
              <el-form ref="form" :model="formLogin">
                <el-form-item>
                  <div class="i1" :class="activet == 0 ? 'i1' : 'i2'">
                    <el-input
                      v-model="formLogin.name"
                      placeholder="请输入账号"
                      @blur="handleBlur"
                      @focus="handleFocus"
                    >
                      <i
                        slot="prefix"
                        class="el-input__icon el-icon-user"
                        style="font-size: 20px"
                        v-if="activet == 0"
                      ></i>
                      <i
                        slot="prefix"
                        class="el-input__icon el-icon-user"
                        style="font-size: 20px; color: #333333"
                        v-else
                      ></i>
                    </el-input>
                    <div class="zh">账号</div>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="i1" :class="activet1 == 0 ? 'i1' : 'i2'">
                    <el-input
                      v-model="formLogin.padd"
                      placeholder="请输入密码"
                      @blur="handleBlur1"
                      @focus="handleFocus1"
                    >
                      <i
                        slot="prefix"
                        class="el-input__icon el-icon-lock"
                        style="font-size: 20px"
                        v-if="activet1 == 0"
                      ></i>
                      <i
                        slot="prefix"
                        class="el-input__icon el-icon-lock"
                        style="font-size: 20px; color: #333333"
                        v-else
                      ></i>
                    </el-input>
                    <div class="zh">密码</div>
                  </div>
                </el-form-item>
              </el-form>
              <div class="submit">登录</div>
              <div class="fts">
                <div class="fts1">立即注册</div>
                <div class="fts2">忘记密码</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="img_box">
      <div class="img_box_wrap">
        <div class="img_select">
          <el-select
            v-model="value"
            placeholder="请选择"
            @change="onSelectValue"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="value1"
            placeholder="请选择"
            @change="onSelectValue1"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="img_list">
          <section>
            <figure>
              <img
                src="http://sjk.zjich.cn/ImageData/loadImageData.page?ViewSize=large&DataOwner=GZ_SY_HuoDong_fengmian&DataID=49241"
                alt=""
              />
              <figcaption>往后余生，风雪是你</figcaption>
            </figure>
            <figure>
              <img
                src="http://sjk.zjich.cn/ImageData/loadImageData.page?ViewSize=large&DataOwner=gz_sb_yangshenggoushangpin_sp_pic&DataID=206"
                alt=""
              />
              <figcaption>往后余生，风雪是你</figcaption>
            </figure>
            <figure>
              <img
                src="https://fygo.zjich.cn/ic_heritage_api/file_path/hnfyg/cg2.png"
                alt=""
              />
              <figcaption>往后余生，风雪是你</figcaption>
            </figure>
            <figure>
              <img
                src="https://fygo.zjich.cn/ic_heritage_api/file_path/hnfyg/cg2.png"
                alt=""
              />
              <figcaption>往后余生，风雪是你</figcaption>
            </figure>
            <figure>
              <img
                src="https://fygo.zjich.cn/ic_heritage_api/file_path/hnfyg/cg2.png"
                alt=""
              />
              <figcaption>往后余生，风雪是你</figcaption>
            </figure>
            <figure>
              <img
                src="https://fygo.zjich.cn/ic_heritage_api/file_path/hnfyg/cg2.png"
                alt=""
              />
              <figcaption>往后余生，风雪是你</figcaption>
            </figure>
            <figure>
              <img
                src="https://fygo.zjich.cn/ic_heritage_api/file_path/hnfyg/cg3.png"
                alt=""
              />
              <figcaption>往后余生，风雪是你</figcaption>
            </figure>
            <figure>
              <img
                src="https://sjk.zjich.cn/ee_uy_qp/attached/image/20230324/20230324145902_65303.jpg"
                alt=""
              />
              <figcaption>往后余生，风雪是你</figcaption>
            </figure>
            <figure>
              <img
                src="https://sjk.zjich.cn/ee_uy_qp/attached/image/20220513/20220513164058_95388.jpg"
                alt=""
              />
              <figcaption>往后余生，风雪是你</figcaption>
            </figure>
            <figure>
              <img
                src="https://fygo.zjich.cn/ic_heritage_api/file_path/hnfyg/cg1.png"
                alt=""
              />
              <figcaption>往后余生，风雪是你</figcaption>
            </figure>
            <figure>
              <img
                src="https://sjk.zjich.cn/ee_uy_qp/attached/image/20220513/20220513164058_36705.jpg"
                alt=""
              />
              <figcaption>往后余生，风雪是你</figcaption>
            </figure>
            <figure>
              <img
                src="https://sjk.zjich.cn/ee_uy_qp/attached/image/20230324/20230324145840_95174.jpg"
                alt=""
              />
              <figcaption>往后余生，风雪是你</figcaption>
            </figure>
            <figure>
              <img
                src="https://sjk.zjich.cn/ee_uy_qp/attached/image/20220513/20220513164058_36705.jpg"
                alt=""
              />
              <figcaption>往后余生，风雪是你</figcaption>
            </figure>
            <figure>
              <img
                src="https://sjk.zjich.cn/ee_uy_qp/attached/image/20230324/20230324145840_95174.jpg"
                alt=""
              />
              <figcaption>往后余生，风雪是你</figcaption>
            </figure>
          </section>
        </div>
      </div>
    </div>
    <footbtn></footbtn>
  </div>
</template>

<script>
//  import { getUserList,addUser  } from "@/api/api.js";
import footbtn from "../../components/foot/index.vue";
export default {
  data() {
    return {
      formLogin: {
        name: "",
        padd: "",
      },
      showLogin: false,
      activet: 0,
      activet1: 0,
      formInline: {
        user: "",
      },
      tableData: [
        {
          date: "G122/132/2021:1",
          name: "0000144787566",
          address: "在馆",
          s1: "2023-08-13",
          s2: "/",
          s3: "浙江图书馆",
          s4: "浙江图书馆",
          s5: "中外图书保存本查阅室(馆内阅览)",
          s9: "图书",
          s6: "/",
          s7: "/",
          s8: "0",
        },
        {
          date: "G122/132/2021:1",
          name: "0000144787566",
          address: "在馆",
          s1: "2023-08-13",
          s2: "/",
          s3: "浙江图书馆",
          s4: "浙江图书馆",
          s5: "中外图书保存本查阅室(馆内阅览)",
          s9: "图书",
          s6: "/",
          s7: "/",
          s8: "0",
        },
        {
          date: "G122/132/2021:1",
          name: "0000144787566",
          address: "在馆",
          s1: "2023-08-13",
          s2: "/",
          s3: "浙江图书馆",
          s4: "浙江图书馆",
          s5: "中外图书保存本查阅室(馆内阅览)",
          s9: "图书",
          s6: "/",
          s7: "/",
          s8: "0",
        },
        {
          date: "G122/132/2021:1",
          name: "0000144787566",
          address: "在馆",
          s1: "2023-08-13",
          s2: "/",
          s3: "浙江图书馆",
          s4: "浙江图书馆",
          s5: "中外图书保存本查阅室(馆内阅览)",
          s9: "图书",
          s6: "/",
          s7: "/",
          s8: "0",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "选项1",
        },
        {
          value: "选项2",
          label: "选项2",
        },
        {
          value: "选项3",
          label: "选项3",
        },
      ],
      value: "",
      options: [
        {
          value: "选项1",
          label: "选项1",
        },
        {
          value: "选项2",
          label: "选项2",
        },
        {
          value: "选项3",
          label: "选项3",
        },
      ],
      value1: "",
    };
  },
  created() {},
  mounted() {
    // this.drawChart()
  },
  methods: {
    onSelectValue() {
    },
    onSelectValue1() {
    },
    format(val) {
      return "2:52";
    },
    sousuos() {
      if (this.formInline.user == "") {
        this.$message.error({ message: "请输入搜索内容!", center: true });
      }
    },
    onSubmit() {
    },
    logins() {
      this.showLogin = !this.showLogin;
    },
    handleBlur() {
      this.activet = 0;
    },
    handleFocus() {
      this.activet = 1;
    },
    handleBlur1() {
      this.activet1 = 0;
    },
    handleFocus1() {
      this.activet1 = 1;
    },
  },
  computed: {},
  components: {
    footbtn,
  },
};
</script>

<style scoped  lang="scss">
::v-deep .el-input {
  display: flex;
  justify-content: center;
  color: #333333;
}
::v-deep .el-input--prefix .el-input__inner {
  width: 305px;
  border: 0px;
}
//搜索框
::v-deep .el-input-group > .el-input__inner {
  height: 56px;
  border: 0px;
  border-top-left-radius: 22px;
  border-bottom-left-radius: 22px;
}
::v-deep .el-input-group__append {
  border: none !important;
  background-color: #fff;
  padding: 0 45px 0 10px;
  border-top-right-radius: 22px;
  border-bottom-right-radius: 22px;
}
::v-deep .el-input-group__append img {
  width: 32px;
  height: 32px;
  padding-top: 12px;
  cursor: pointer;
}
::v-deep .el-button--primary {
  background-color: #911f23;
  border-color: #911f23;
  border-radius: 8px;
  height: 56px;
  width: 112px;
  margin-left: 16px;
}
::v-deep .el-form--inline .el-form-item {
  margin-right: 0;
}

.shujixq {
  width: 100%;
  background-color: #f7f7f8;
  .booktop {
    width: 100%;
    height: 200px;
    background: url("../../assets/images/booktop.png") no-repeat;
    background-size: 100% 100%;
    .top {
      width: 1400px;
      height: 176px;
      margin: 0 auto;
      // background-color: #F7F7F8;
      .top1 {
        position: relative;
        width: calc(100% - 0px);
        margin: 0 auto;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background-color: pink;
        .imgs {
          position: absolute;
          top: 0;
          width: 138px;
          height: 176px;
          z-index: 100;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .lefts {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          margin-left: 170px;
          .lefts1 {
            font-size: 24px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #333333;
            // line-height: 35px;
          }
          .lefts2 {
            font-size: 14px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #666666;
          }
        }
        .rights {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: space-between;
          // padding-bottom: 40px;
          height: 100%;
          .ris1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 18px;
            width: 362px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #3d3d3d;
            margin-top: 0px;
          }
          .ris2 {
            position: absolute;
            top: 90px;
            width: calc(362px - 48px);
            height: 290px;
            background: #ffffff;
            box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.2);
            border-radius: 8px 8px 8px 8px;
            opacity: 1;
            z-index: 20;
            padding: 24px;
            .login {
              width: 100%;
              text-align: center;
              font-size: 24px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #333333;
              padding-bottom: 24px;
            }
            .i1 {
              position: relative;
              width: 100%;
              height: 46px;
              background: url("../../assets/images/inputs.png") no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              .zh {
                position: absolute;
                top: -20px;
                left: 30px;
                font-size: 12px;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #999999;
              }
            }
            .i2 {
              position: relative;
              width: 100%;
              height: 46px;
              background: url("../../assets/images/inputs1.png") no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              .zh {
                position: absolute;
                top: -20px;
                left: 30px;
                font-size: 12px;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #333333;
              }
            }
            .submit {
              width: 100%;
              height: 46px;
              background: #911f23;
              border-radius: 8px 8px 8px 8px;
              opacity: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 18px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #ffffff;
            }
            .fts {
              width: 100%;
              display: flex;
              justify-content: space-between;
              margin-top: 10px;
              font-size: 12px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              .fts1 {
                color: #911f23;
                cursor: pointer;
              }
              .fts2 {
                color: #cccccc;
                cursor: pointer;
              }
            }
          }
          .ris3 {
            // width: 362px;
            // margin-top: 37px;
          }
          .ri {
            padding-right: 30px;
          }
          .ri1 {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 68px;
            height: 38px;
            background: #911f23;
            border-radius: 8px 8px 8px 8px;
            opacity: 1;
            color: #fff;
            cursor: pointer;
          }
        }
      }
    }
  }
  .img_box {
    margin: 20px 0 50px;
    .img_box_wrap {
      width: 1426px;
      margin: 0 auto;
      .img_select {
        display: flex;
        justify-content: end;
        margin-bottom: 20px;
        ::v-deep .el-select {
          width: 90px;
          margin-right: 16px;
        }
      }
      .img_list {
        img {
          display: block;
          border-radius: 10px;
        }
        section {
          max-width: 100%;
          margin: 0 auto;
          overflow: hidden;
          column-count: 6;
          column-gap: 0;
          // column-fill: auto;
        }
        figure {
          width: 210px;
          margin: 0 12px 10px;
          break-inside: avoid;
          // padding: 5px;
          /*  font-variant:small-caps */
        }
        figure img {
          width: 100%;
        }
        figcaption {
          padding: 10px 0;
          color: #000;
          margin-left: 10px;
        }
        dialog {
          width: 300px;
          height: 400px;
          background: yellow;
          border: 2px solid white;
        }
      }
    }
  }
}
</style>


